<template>
  <div @click="onDownload" :title="data.fileName" class="remote-root-remote-document-file yj">
    {{data.fileName}}<i title="删除文件" @click.stop="onDelFile" class="el-icon-close delbtn"></i>
  </div>
</template>

<script>
export default {
  name: "RemoteFile",
  components: {},
  props: ["uuid", "data", "onDelfileP"],
  data() {
    return {};
  },
  methods: {
    onDownload() {
      window.open(
        "/webapi/file/download?uuid=" +
          this.uuid +
          "&fileId=" +
          this.data.fileId
      );
    },
    onDelFile() {
      this.utils.http(
        "post",
        "/webapi/file/delete",
        {
          uuid: this.uuid,
          fileId: this.data.fileId,
        },
        () => {
          this.onDelfileP(this.data.fileId);
        }
      );
    },
  },
  mounted() {},
  destroyed() {},
};
</script>

<style>
.remote-root-remote-document-file {
  cursor: pointer;
  padding: 10px;
  font-size: 14px;
  background-color: whitesmoke;
  margin: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.remote-root-remote-document-file:hover {
  background-color: #dedede;
}

.remote-root-remote-document-file .delbtn {
  margin-left: 10px;
  color: red;
  font-size: 18px;
  cursor: pointer;
  position: absolute;
  right: 20px;
}
</style>